<template>
  <!-- 空登陆页 -->
  <view class="page">
    <view class="header">
      <view class="logo" style="text-align: center; margin-top: 100rpx">
        <view
          style="
            font-weight: bold;
            color: #fff;
            letter-spacing: 10rpx;
            font-size: 50rpx;
          "
          >优福商城</view
        >
      </view>
    </view>

    <view class="login">
      <view class="title"><text>登录</text></view>

      <template v-if="type === 0">
        <view class="block flex">
          <view class="icon">
            <image
              src="https://ihuanggang-live-1323882773.cos.ap-nanjing.myqcloud.com//image/2025/01/09/8ff1c3574218497ea64c6118704daae2.png"
            />
          </view>
          <view class="input">
            <input
              v-model="form_username"
              placeholder="请输入手机号手机号进行登录"
              type="text"
            />
          </view>
        </view>
        <!-- <view class="block flex">
          <view class="icon">
            <image
              src="https://ihuanggang-live-1323882773.cos.ap-nanjing.myqcloud.com//image/2025/01/09/0eab7008ac454cd385fdaeccb1165294.png"
            />
          </view>
          <view class="input">
            <input
              v-model="form_password"
              placeholder="请输入密码"
              type="safe-password"
            />
          </view>
        </view> -->
      </template>

      <!-- <template v-if="type === 1">
				<view class="block">
					<view class="icon">
						<image src="/static/login/mobile.png" />
					</view>
					<view class="input">
						<input v-model="form_tel" type="tel" maxlength="11" placeholder="请输入手机号" />
					</view>
				</view>
				<view class="block">
					<view class="icon">
						<image
							src="https://ihuanggang-live-1323882773.cos.ap-nanjing.myqcloud.com//image/2025/01/09/0692a2b0720a48bb81e353da1f4ff7a2.png" />
					</view>
					<view class="input">
						<input v-model="form_code" placeholder="请输入验证码" type="number" />
					</view>
					<view class="send-button" @click="sendCode()">
						<text v-if="!send_count_down">发送验证码</text>
						<text v-else>重新发送 {{send_count_down}} S</text>
					</view>
				</view>
			</template> -->

      <!-- <view class="change-type">
  			<text v-if="type === 0" @click="changeType()">短信验证码登录</text>
  			<text v-else @click="changeType()">用户名密码登录</text>
  		</view> -->

      <view style="margin-top: 300rpx;" class="button" @click="login()"><text>登录</text></view>
    </view>
  </view>
</template>

<script>
import sheep from "@/sheep";
export default {
  data() {
    return {
      type: 0, // 0 用户密码登录  1 验证码登录
      form_username: "",
      form_password: "",
      form_tel: "",
      form_code: "",
      send_count_down: 0, // 验证码重新发送等待倒计时
    };
  },
  onLoad() {},
  methods: {
    changeType() {
      this.type = this.type ? 0 : 1;
    },
    sendCode() {
      if (this.send_count_down === 0) {
        // 验证手机号规则 调用发送验证码接口
        let countDown = 60;
        this.send_count_down = countDown;
        let timer = setInterval(() => {
          countDown--;
          this.send_count_down = countDown;
          if (countDown === 0) {
            clearInterval(timer);
          }
        }, 1000);
      }
    },
    login() {
      if (this.type === 0) {
        // 用户密码登录
        console.log(this.form_username, this.form_password);
        const parmas = {
          mobile: this.form_username,
        };
        sheep.$api.user.accountLogin(parmas).then(res => {
          console.log('登录成功', res);
          // 登录成功后返回上一页并刷新
          const pages = getCurrentPages();
          if (pages.length > 1) {
            // 获取上一页实例
            const prevPage = pages[pages.length - 2];
            // 返回上一页
            uni.navigateBack({
              success: () => {
                // 返回成功后刷新上一页
                if (prevPage && prevPage.onShow) {
                  prevPage.onShow();
                }
                // 或者使用页面刷新方法
                if (prevPage && prevPage.$vm && prevPage.$vm.onShow) {
                  prevPage.$vm.onShow();
                }
              }
            });
          } else {
            // 如果没有上一页，跳转到首页
            uni.switchTab({
              url: '/pages/index/index'
            });
          }
        }).catch(err => {
          console.error('登录失败', err);
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.page {
  min-height: 100vh;
  background: #fff;

  .header {
    height: 30vh;
    background: #ff7a0c;
    display: flex;
    align-items: center;
    justify-content: center;

    .logo {
      height: 200rpx;
      // width: 200rpx;
      margin-top: -100rpx;

      image {
        height: 200rpx;
        width: 200rpx;
      }
    }
  }

  .login {
    height: 700rpx;
    width: 680rpx;
    padding: 20rpx;
    border-radius: 12rpx;
    background: #fff;
    margin: -100rpx auto auto auto;
    box-shadow: #ccc 0px 3px 6px;
    box-sizing: border-box;

    .title {
      font-size: 20px;
      line-height: 120rpx;
      color: #444;
      text-align: center;
    }

    .block {
      display: flex;
      align-items: center;
      height: 100rpx;
      width: 640rpx;
      border-bottom: 1px solid #ccc;
      margin: 40rpx 0;
      position: relative;

      .icon {
        width: 80rpx;
        height: 80rpx;

        image {
          margin: 15rpx;
          width: 50rpx;
          height: 50rpx;
        }
      }

      .input {
        width: calc(640rpx - 80rpx);
        font-size: 14px;

        input {
          height: 80rpx;
        }
      }

      .send-button {
        position: absolute;
        right: 0;
        top: 10rpx;
        height: 80rpx;
        width: 220rpx;
        text-align: center;
        line-height: 80rpx;
        font-size: 12px;
        color: #777;
        z-index: 99;
      }
    }

    .change-type {
      width: 640rpx;
      text-align: right;
      margin-bottom: 60rpx;

      text {
        padding: 5rpx;
        font-size: 12px;
        color: #0d96fe;

        &:active {
          color: #3771f9;
        }
      }
    }

    .button {
      width: 500rpx;
      height: 80rpx;
      border-radius: 30rpx;
      text-align: center;
      line-height: 80rpx;
      font-size: 16px;
      color: #fff;
      background: linear-gradient(to right, #ff7a0c, #ff7a0c);
      margin: auto;

      &:active {
        background: #ff7a0c;
      }
    }
  }
}
</style>
